<template>
  <div class="commission">
    <dt-search ref="search" :xl='6' :xlBtn='6'></dt-search>

    <audit-modal ref='audit' @success='onSuccess'></audit-modal>
    <detail-modal ref='detail'></detail-modal>

    <dt-grid ref="table" :columns="columns" page :onFetch='onFetch' />
  </div>
</template>

<script>
  import columnOpt from '../opt/column.js'
  import auditModal from '../components/audit-modal.vue'
  import detailModal from '../components/detail-modal.vue'
  import ruleMgr from '@/biz/commission/rule.js'
  import searchOpt from '../opt/search.js'

  export default {
    components: {
      auditModal,
      detailModal
    },
    data() {
      return {
        columns: [],
      }
    },
    mounted() {
      this.columns = columnOpt.options(this, true)

      this.$refs.table.init(this)
      this.$refs.search.init(this.$refs.table, searchOpt.options(this, true), {
        commissionRuleType: 2,
        ruleStatus: '0',
      })
      this.$refs.table.fetch()
    },
    methods: {
      onDetail(item) {
        ruleMgr.detail(item.ruleId).then(res => {
          this.$refs.detail.show(res, 3)
        })
      },
      onAudit(item) {
        ruleMgr.detail(item.ruleId).then(info => {
          this.$refs.audit.show(info)
        })
      },
      onSuccess() {
        this.$refs.table.fetch()
      },
      onFetch(data) {
        return ruleMgr.list(data)
      }
    },
  }
</script>

<style lang="scss" scoped>
  .commission {
    padding: 20px;
  }
</style>